<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:include="common/head::head('编辑banner')"></head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>编辑信息</h5>
        </div>
        <div class="ibox-content">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">基本信息</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">banner标题</label>
                                    <div class="col-sm-6">
                                        <input type="text" th:text="${banner!=null?banner.title:''}" id="title" name="title" maxlength="30"
                                               class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">图片</label>
                                    <!--<div class="col-sm-6">-->
                                    <!--<input type="file" id="uploadfile" style="width: 100px;" name="uploadfile" readonly="readonly"-->
                                    <!--class="form-control" accept="image/*" multiple=""/>-->
                                    <!--<span class="help-block"><i-->
                                    <!--class="fa fa-info-circle"></i>推荐尺寸比例：2:1</span>-->

                                    <!--<img class="imgpreview" src="../../resource/img/bg.png"-->
                                    <!--style="width:200px;height:100px;"/>-->
                                    <!--</div>-->
                                    <div class="col-sm-8">
                                        <input type="hidden" id="url" value="" th:value="${banner!=null?banner.url:''}"/>
                                        <input type="file" style="display: none" id="uploadfile" name="uploadfile" readonly="readonly"
                                               class="form-control">
                                        <a title="选择图片">
                                            <img class="imgpreview" src="../../resource/img/bg.png" th:src="${banner!=null?banner.url:''}" onerror="this.src='/resource/img/bg.png'"
                                                 style="margin-top: 10px; width:200px;height:100px;"
                                            />
                                        </a>
                                        <div style="color: grey;">推荐尺寸比例：2:1</div>
                                    </div>

                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">跳转类型</label>
                                    <div class="col-sm-6">
                                        <select id="sltType" style="height: 34px;">
                                            <option value="1">外部跳转</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">跳转链接</label>
                                    <div class="col-sm-6">
                                        <input type="text" id="link" th:text="${banner!=null?banner.link:''}" name="link" maxlength="30"
                                               class="form-control">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-8 col-sm-offset-5">
            <button class="btn btn-success btn-submit" type="button" onclick="jsHelper.submit()">提交
            </button>
        </div>
    </div>
</div>
</div>
</div>
<footer th:include="common/footer::js"/>
<script src="../../resource/js/plugins/prettyfile/bootstrap-prettyfile.js"></script>
<script>
    $(function () {
//        $('input[type="file"]').prettyFile();
        $('.imgpreview').click(function () {
            $("#uploadfile").click();
        });
        $('body').delegate("#uploadfile", 'change', function () {
            hotUtil.loading.show();
            hotUtil.uploadImg($("#uploadfile")[0].files, "banner", function (url, path) {
                hotUtil.loading.close();
                $(".imgpreview").attr("src", url);
                $("#url").val(url);
            });
        });

    });
    var jsHelper = {

        submit: function () {
            var param = {
                id: hotUtil.getQuery("id"),
                url: $("#url").val(),
                link: $("#link").val(),
                title: $("#title").val(),
                type: $("#sltType").val()
            }
            if (hotUtil.isNullOrEmpty(param.url)) {
                swal("请上传图片", "", "warning");
                return false;
            }
            hotUtil.loading.show();
            hotUtil.ajaxCall("/banner/edit", param, function (ret) {
                hotUtil.loading.close();
                if (ret.resultCode === 2000) {
                    swal("提交成功", "", "success");
                    setTimeout(function () {
                        window.location.reload();
                    }, 500);
                } else {
                    swal("提交失败", "", "error");
                }
            });
        }
    }

</script>
</body>

</html>